/*
 * Copyright (c) 2007-2020 西安交通信息投资营运有限公司 版权所有
 * 作者:马星俊
 */

import React, {FC} from "react";
import userService from "@/pages/sys/user/service";
import {SysUserModel} from "@/pages/sys/user/data";
import styles from "@/pages/sys/role/components/Authorize.less";
import UserDetailsPage from "@/pages/sys/user/components/Details";
import useDialog from "@/hooks/useDialog";
import useLoad from "@/hooks/useLoad";

const Member: FC<{ primaryKey: string }> = (props) => {
  const detailsOperate = useDialog();
  const {primaryKey} = props;
  const {data: members = []} = useLoad<SysUserModel[]>({
    onLoad: () => userService.selectListByDeptId(primaryKey, false)
  });

  return (
    <div style={{margin: '0 24px 0 0'}}>
      {members.length ? (
        <ul className={styles.uiK}>
          {members.map(p => <li className={styles.liCard} key={p.id}
                                onDoubleClick={() => detailsOperate.show({id: p.id})}>{p.name}</li>)}
        </ul>) : (<div className={`${styles.alert} ${styles.warning} ${styles.margin} ${styles.padding}`}>未添加成员</div>)}
      <UserDetailsPage {...detailsOperate}/>
    </div>
  )
}

export default Member;
